<template>
  <view class="list-container">
    <scroll-view
      scroll-y
      class="scroll-Y"
      lower-threshold="30"
      :refresher-enabled="refresherEnabled"
      :refresher-triggered="triggered"
      :refresher-background="refresherBackground"
      :style="{ height }"
      @refresherrefresh="refresh"
      @scrolltolower="lower"
    >
      <view class="list">
        <slot name="list" :data="list"></slot>
      </view>
      <slot name="empty" v-if="list.length === 0 && status === 'noMore'"></slot>
      <uni-load-more :iconSize="16" :status="status" v-else></uni-load-more>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      list: [],
      // 分数状态
      page: 1,
      total: 0,
      pageSize: 12,
      // 上拉状态
      status: 'more',
      // 查询参数
      queryParams: {},
      // 下拉状态
      triggered: false,
    };
  },
  props: {
    api: {
      type: Function,
      default: () => {},
    },
    init: {
      type: Object,
    },
    refresherEnabled: {
      type: Boolean,
      default: true,
    },
    refresherBackground: {
      type: String,
      default: 'transparent',
    },
    height: {
      type: String,
      default: '60vh',
    },
  },
  watch: {
    init: {
      handler(newVal) {
        // this.getData();
      },
      immediate: false,
      deep: true,
    },
  },
  created() {},
  methods: {
    // 获取数据
    getData() {
      this.status = 'loading';
      uni.showLoading({ title: '加载中' });
      this.api({
        pageNum: this.page,
        pageSize: this.pageSize,
        ...this.queryParams,
        ...this.init,
      })
        .then((res) => {
          if (this.page == 1) {
            this.list = res.rows;
          } else {
            this.list = [...this.list, ...res.rows];
          }

          // this.page = res.current;
          this.total = res.total;
          this.status = res.total > this.list.length ? 'more' : 'noMore';
          // this.status = res.total > this.list.length ? 'more' : 'noMore';
        })
        .catch((err) => {
          this.status = 'noMore';
        })
        .finally(() => {
          this.triggered = false;
          uni.hideLoading();
        });
    },
    searchData(params = {}) {
      this.page = 1;
      this.queryParams = params;
      this.getData(true);
    },
    lower(e) {
      let allpage = Math.ceil(this.total / this.pageSize);
      if (this.page >= allpage) {
        this.status = 'noMore';
        return;
      } else {
        this.status = 'loading';
      }
      this.page++;
      console.log('this.page', this.page);
      this.getData();
    },
    refresh() {
      this.page = 1;
      this.triggered = true;
      this.getData(true);
    },
    // 跳转页面
    onLocation(url) {
      uni.navigateTo({
        url,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.list-container {
  height: 100%;
  position: relative;
  .scroll-Y {
    height: 100%;
  }
  .list {
    min-height: 100%;
  }
}
</style>
